<template>
  <div class="next-container" :style="{backgroundColor: bgc}"
  @click="changeCurIndex"
  >
    <i class="iconfont icon-jiantouyou"  :style="{ color: arrowColor }"
    :class="[arrowSize]"
    ></i>
  </div>
</template>

<script>
export default {
  name: 'Next',
  props: {
    bgc: {
      type: String,
      default: 'rgba(0, 0, 0, .5)'
    },
    arrowColor: {
      type: String,
      default: '#fff'
    },
    arrowSize: {
      type: String,
      default: 'middle',
      validate(value) {
        return ['min', 'middle', 'max'].includes(value);
      }
    }
  },
  emits: ['changeCurIndex'],
  setup( props, ctx) {
    const changeCurIndex = function () {
      ctx.emit('changeCurIndex', 'next');
    }

    return {
      changeCurIndex
    }
  }
}
</script>

<style lang="scss" scoped>
.next-container {
  width: 50px;
  height: 50px;
  // background-color: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  &:hover {
    opacity: .9;
  }
  cursor: pointer;
  .iconfont {
    &.min {
      font-size: 18px;
    }

    &.middle {
      font-size: 22px;
    }

    &.max {
      font-size: 26px;
    }
  }
}
</style>